<template>
  <div class="q-pa-md">
    <q-table
      style="width: 100%"
      :data="rows"
      row-key="wyid"
      :pagination.sync="pagination"
      :loading="loading"
      @request="onRequest"
      :columns="columns"
    >
      <template v-slot:top-left>
        <div class="text-h5">{{ titleState }}</div>
      </template>
      <template v-slot:top-right>
        <div style="border-bottom: 1px solid #000;">
          <q-input
            borderless
            dense
            debounce="300"
            v-model="filter"
            @keyup.enter="getData"
            placeholder="相关信息检索"
          >
            <template v-slot:append>
              <q-icon name="search" />
            </template>
          </q-input>
        </div>
      </template>
    </q-table>
  </div>
</template>
<script>
import { forEach } from "lodash";
export default {
  name: "Ddgl",
  computed: {
    titleState: {
      get() {
        return this.$store.state.module.pageTitle;
      },
      set(val) {
        this.$store.commit("module/upPageTitle", val);
      }
    }
  },
  data() {
    return {
      rows: [],
      loading: false,
      filter: "",
      columns: [],
      colConfig: [],
      pagination: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10,
        sortBy: "pgrksj",
        descending: false
      }
    };
  },
  methods: {
    onRequest(props) {
      const { page, rowsPerPage, sortBy, descending } = props.pagination;
      this.loading = true;
      this.$axios({
        method: "post",
        url: "/query/getClassList",
        params: {
          page,
          rowsPerPage,
          sortBy,
          descending,
          query: this.filter,
          name: "BeanJyjlb"
        }
      })
        .then(res => {
          this.loading = false;
          const { list, pager, colnums } = res.data;
          this.colConfig = colnums;
          this.initCol(this.colConfig);
          const { recordCount, pageCount, pageNumber } = pager;
          this.rows = list;
          this.pagination.rowsNumber = recordCount;
          this.pagination.page = pageNumber;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getData() {
      this.pagination = {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10,
        sortBy: "pgrksj",
        descending: false
      };
      this.onRequest({
        pagination: this.pagination
      });
    },
    initCol(cols) {
      let arr = [];
      forEach(cols, col => {
        arr.push({
          field: col.column_name,
          name: col.column_name,
          required: true,
          label: col.description,
          align: "left",
          sortable: true
        });
      });
      this.columns = arr;
    }
  },
  created() {
    forEach(this.columns, col => {
      if (col.sortable === true) {
        col.name = col.field;
      }
    });
  },
  mounted() {
    this.onRequest({
      pagination: this.pagination
    });
  }
};
</script>

<style scoped></style>
